<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可收缩侧边栏</title>
    <link
      rel="stylesheet"
      href="/node_modules/bootstrap-icons/font/bootstrap-icons.css"
    />
    <style>
      .sidebar {
        width: 250px;
        height: 100vh;
        background-color: #f8f9fa;
        position: fixed;
        top: 0;
        left: 0;
        transition: width 3s ease;
      }

      .sidebar .sidebar-content {
        width: 100%;
        height: 100%;
        transition: width 3s ease;
        background-color: lightcoral;
      }

      .sidebar.collapsed {
        width: 32px;
        /* height: auto; */

        background-color: rgba(0, 0, 0, 0);
      }

      .sidebar.collapsed .sidebar-content {
        width: 0;
        display: none;
        overflow: hidden;
      }

      .sidebar-toggle {
        position: absolute;
        top: 8px;
        right: 8px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="sidebar">
      <div class="sidebar-content">
        <!-- 侧边栏的内容 -->
        <!-- <h2>菜单</h2>
        <ul>
          <li>选项 1</li>
          <li>选项 2</li>
          <li>选项 3</li>
        </ul> -->
      </div>
      <div class="sidebar-toggle">
        <i class="bi bi-house"></i>
      </div>
    </div>

    <script>
      // 获取侧边栏和切换按钮元素
      const sidebar = document.querySelector(".sidebar");
      const sidebarToggle = document.querySelector(".sidebar-toggle");

      // 添加点击事件处理函数
      sidebarToggle.addEventListener("click", function () {
        sidebar.classList.toggle("collapsed");
      });
    </script>
  </body>
</html>
